<template>
  <el-form ref="seniorSetForm"
           id="seniorSetForm"
           :label-width="labelWidth">
    <el-form-item label="大背景图"
                  v-if="doll"
                  prop="bigBackgroundImage">
      <el-input type="file"
                name="bigBackgroundImage"
                v-model="bigBackgroundImage"
                class="file">
      </el-input>
      <!-- <el-input type="file"
                name="seniorSetForm.bigBackgroundImage"
                v-model="seniorSetForm.bigBackgroundImage"
                class="file">
      </el-input> -->
    </el-form-item>
    <el-form-item label="跑马灯"
                  v-if="doll"
                  prop="horseRaceLampImage">
      <el-input type="file"
                name="horseRaceLampImage"
                v-model="horseRaceLampImage">
      </el-input>
    </el-form-item>
    <el-form-item label="抓娃娃"
                  v-if="doll"
                  prop="DismantlingDollsImage">
      <el-input type="file"
                name="DismantlingDollsImage"
                v-model="DismantlingDollsImage">
      </el-input>
    </el-form-item>
    <el-form-item label="边框"
                  v-if="doll"
                  prop="FrameImage">
      <el-input type="file"
                name="FrameImage"
                v-model="FrameImage">
      </el-input>
    </el-form-item>
    <el-form-item label="参与记录"
                  v-if="doll"
                  prop="participationRecordImage">
      <el-input type="file"
                name="participationRecordImage"
                v-model="participationRecordImage">
      </el-input>
    </el-form-item>

    <el-form-item label="活动规则"
                  v-if="doll"
                  prop="activityRuleImage">
      <el-input type="file"
                name="activityRuleImage"
                v-model="activityRuleImage"></el-input>
    </el-form-item>
    <el-form-item label="小背景图"
                  v-if="doll"
                  prop="littleBackgroundImage">
      <el-input type="file"
                name="littleBackgroundImage"
                v-model="littleBackgroundImage"></el-input>
    </el-form-item>
    <el-form-item label="开始按钮"
                  v-if="doll"
                  prop="startButtonImage">
      <el-input type="file"
                name="startButtonImage"
                v-model="startButtonImage"></el-input>
    </el-form-item>
    <el-form-item label="高级按钮"
                  v-if="doll"
                  prop="advancedButtonImage">
      <el-input type="file"
                name="advancedButtonImage"
                v-model="advancedButtonImage"></el-input>
    </el-form-item>
    <el-form-item label="初级按钮"
                  v-if="doll"
                  prop="primaryButtonImage">
      <el-input type="file"
                name="primaryButtonImage"
                v-model="primaryButtonImage"></el-input>
    </el-form-item>
    <el-form-item label="娃娃样式"
                  v-if="doll"
                  prop="dollStyle">
      <!-- <el-input type="file"
                name="seniorSetForm.primaryButtonImage"
                v-model="seniorSetForm.primaryButtonImage"></el-input> -->
      <el-upload class="avatar-uploader"
                 :action="uploadImg.action"
                 :on-remove="handleRemove"
                 :on-preview="handlePreview"
                 :on-success="handleSuccess"
                 multiple
                 :before-upload="qwe"
                 :file-list="fileList"
                 list-type="picture">
        <el-button size="small"
                   type="primary">点击上传</el-button>
        <div slot="tip"
             class="el-upload__tip">只能上传jpg/png文件</div>
        <div slot="tip"
             class="el-upload__tip">至少上传五张图片</div>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button class="pan-btn green-btn sm-btn"
                 size="small"
                 @click="saveSetHandle">保 存</el-button>
      <el-button type="danger"
                 class="pan-btn red-btn sm-btn"
                 size="small"
                 @click="deleteHandle">删 除</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import request from '@/utils/request'

export default {
  name: 'imgSet',
  props: ['json'],
  data() {
    return {
      fileList: [],
      uploadImg: {
        action: '/activityConsole/periodicalMessage/uploadImage/'
      },
      doll: false,
      //   scene: '0',
      labelWidth: '150px',
      guessContentFlag: false,
      //   seniorSetForm: {
      bigBackgroundImage: '',
      littleBackgroundImage: '',
      horseRaceLampImage: '',
      DismantlingDollsImage: '',
      FrameImage: '',
      participationRecordImage: '',
      activityRuleImage: '',
      startButtonImage: '',
      advancedButtonImage: '',
      primaryButtonImage: '',
      dollStyle: ''

      //   }
    }
  },
  mounted() {
    console.log(this.json)
    if (this.json.templateMark === 'prizeclaw') {
      this.doll = true
    } else {
      this.doll = false
    }
    this.$nextTick(function() {
      if (this.json.templateMark !== undefined) {
        const templateType = this.json.templateMark.toLowerCase()
        if (templateType === 'guess') {
          this.guessContentFlag = !this.guessContentFlag
        }
      }
    })
  },
  methods: {
    saveSetHandle() {
      //   if (!this.bigBackgroundImage) {
      //     this.$message({ type: 'error', message: '大背景图必选' })
      //     return
      //   }
      //   if (!this.horseRaceLampImage) {
      //     this.$message({ type: 'error', message: '跑马灯必选' })
      //     return
      //   }
      //   if (!this.DismantlingDollsImage) {
      //     this.$message({ type: 'error', message: '抓娃娃必选' })
      //     return
      //   }
      //   if (!this.FrameImage) {
      //     this.$message({ type: 'error', message: '边框必选' })
      //     return
      //   }

      //   if (!this.participationRecordImage) {
      //     this.$message({ type: 'error', message: '参与记录必选' })
      //     return
      //   }
      //   if (!this.activityRuleImage) {
      //     this.$message({ type: 'error', message: '活动规则必选' })
      //     return
      //   }
      //   if (!this.littleBackgroundImage) {
      //     this.$message({ type: 'error', message: '小背景图必选' })
      //     return
      //   }
      //   if (!this.startButtonImage) {
      //     this.$message({ type: 'error', message: '开始按钮必选' })
      //     return
      //   }
      //   if (!this.primaryButtonImage) {
      //     this.$message({ type: 'error', message: '初级按钮必选' })
      //     return
      //   }

      //   if (!this.advancedButtonImage) {
      //     this.$message({ type: 'error', message: '高级按钮必选' })
      //     return
      //   }

      //   if (this.fileList.length < 5) {
      //     this.$message({ type: 'error', message: '娃娃样式上传图片至少五张' })
      //     return
      //   }

      const formData = new FormData(document.querySelector('#seniorSetForm'))
      formData.append('dollStyle', this.dollStyle)
      const _this = this
      request({
        url: '/activityConsole/activity/activityInfoId/' + _this.json.activityId + '/advanced-setting/savePrizeClawImageMessage',
        method: 'post',
        data: formData,
        postType: 'form'
      }).then(res => {
        _this.$message({
          type: 'success',
          message: res.description
        })
      }).catch(err => {
        console.log(err)
      })
    },
    deleteHandle() {
      const _this = this
      const sceneStr = Number(this.scene) === 1 ? 'pc' : 'wap'
      request({
        url: '/activityConsole/activity/activityInfoId/' + _this.json.activityId + '/advanced-setting/scene/' + sceneStr,
        method: 'DELETE'
      }).then(res => {
        console.log(res)
        _this.$message({
          type: 'success',
          message: res.description
        })
      }).catch(err => {
        console.log(err)
      })
    },
    qwe(file) {
      const _this = this
      const b = file.type.indexOf('image') !== -1
      if (!b) {
        _this.$message({
          type: 'error',
          message: '文件类型不支持'
        })
        return false
      }
      return true
    },
    handleRemove(file, fileList) {
      const _this = this
      console.log('handleRemove:===============================================')
      _this.fileList = fileList
    },
    handlePreview(file) {
      const _this = this
      console.log('handlePreview:===============================================')
    },
    handleSuccess(response, file, fileList) {
      const _this = this
      console.log('handlePreviewSuccess:===============================================')
      _this.fileList = fileList
      const arr = []
      for (var i = 0; i < fileList.length; i++) {
        arr.push(fileList[i].response.data)
      }
      _this.dollStyle = arr.join()
    }
  }
}
</script>
<style scoped>
.el-input >>> .el-input__inner {
  border: none !important;
  line-height: 15px !important;
}
</style>
